Android基础
13 分钟 读完 (大约 1994 个字)

《Android 基础（四十)》 FlexboxLayout

1. 简介

Flexbox-layout，是Google推出的流式布局。具体的基本介绍可以参考Github上的Wiki。看一下类的英文说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
`/**
 * A layout that arranges its children in a way its attributes can be specified like the
 * CSS Flexible Box Layout Module.
 * This class extends the {@link ViewGroup} like other layout classes such as {@link LinearLayout}
 * or {@link RelativeLayout}, the attributes can be specified from a layout XML or from code.
 *
 * The supported attributes that you can use are:
 * <ul>
 * <li>{@code flexDirection}</li>
 * <li>{@code flexWrap}</li>
 * <li>{@code justifyContent}</li>
 * <li>{@code alignItems}</li>
 * <li>{@code alignContent}</li>
 * <li>{@code showDivider}</li>
 * <li>{@code showDividerHorizontal}</li>
 * <li>{@code showDividerVertical}</li>
 * <li>{@code dividerDrawable}</li>
 * <li>{@code dividerDrawableHorizontal}</li>
 * <li>{@code dividerDrawableVertical}</li>
 * </ul>
 * for the FlexboxLayout.
 *
 * And for the children of the FlexboxLayout, you can use:
 * <ul>
 * <li>{@code layout_order}</li>
 * <li>{@code layout_flexGrow}</li>
 * <li>{@code layout_flexShrink}</li>
 * <li>{@code layout_flexBasisPercent}</li>
 * <li>{@code layout_alignSelf}</li>
 * <li>{@code layout_minWidth}</li>
 * <li>{@code layout_minHeight}</li>
 * <li>{@code layout_maxWidth}</li>
 * <li>{@code layout_maxHeight}</li>
 * <li>{@code layout_wrapBefore}</li>
 * </ul>
 */`

应该很容易看懂，主要是提供类似于CSS中Flexible Box Layout的能力。

2. 属性值

针对FlexboxLayout
|属性|
|——|——|
|flexDirection||
|flexWrap||
|justifyContent||
|alignItems||
|alignContent||
|showDivider||
|showDividerHorizontal||
|showDividerVertical||
|dividerDrawable||
|dividerDrawableHorizontal||
|dividerDrawableVertical||

针对FlexboxLayout中的子元素

|属性|
|——|——|
|layout_order||
|layout_flexGrow||
|layout_flexShrink||
|layout_flexBasisPercent||
|layout_alignSelf||
|layout_minWidth||
|layout_minHeight||
|layout_maxWidth||
|layout_maxHeight||
|layout_wrapBefore||

3. FlexboxLayout属性自测

3.1 flexDirection

flexDirection属性支持row , row_reverse , column , column_reverse四个取值。分别代表左右，右左，上下，下上。

flexDIrection 效果图
row 这里写图片描述
row_reverse 这里写图片描述
column 这里写图片描述
column_reverse 这里写图片描述

3.2 flexWrap

flexWrap, 表示换行与否，支持<font color=red>wrap , nowrap , wrap_reverse`。默认为noWrap，表示不换行，wrap表示自动换行，还有一个wrap_reverse 表示副轴反转。
以flexDirection为row时为例

flexWrap
wrap 这里写图片描述
nowrap 这里写图片描述
wrap_reverse 这里写图片描述

3.3 justifyContent

justifyContent，表示控件沿主轴对齐方向。支持flex_start , flex_end , center , space_between , space_around五种取值。

下面以flexDirection为row , flexWrap为wrap为例，注意比较效果之间的差异，就可以很直观的了解到每个属性值的作用。

justifyContent 效果图
flex_start 这里写图片描述
flex_end 这里写图片描述
center 这里写图片描述
space_between 这里写图片描述
space_around 这里写图片描述

3.4 alignItems

alignItems , 描述元素在副轴上的对齐方向（针对单行) , 支持flex_start , flex_end , center , baseline , stretch五种取值。

以flexDirection为row , flexWrap为nowrap为例，注意比较不同属性之间的效果差异。由于上面示例中我们针对flexboxlayout的高度使用的时wrap_content , 下面这个示例中我们给flexboxlayout一个合适的固定高度活着改成match_parent更容易看出效果

alignItems 效果图
flex_start 这里写图片描述
flex_end 这里写图片描述
center 这里写图片描述
baseline 这里写图片描述
stretch 这里写图片描述

3.5 alignContent

alignContent , 表示控件在副轴上的对齐方向（针对多行元素）。支持flex_start , flex_end , center , space_between , space_around , stretch六种取值

flexboxlayout改成match_parent , 以flexDirection为row , flexWrap为wrap为例， 看看效果

alignContent 效果图
flex_start 这里写图片描述
flex_end 这里写图片描述
center 这里写图片描述
space_between 这里写图片描述
space_around 这里写图片描述
stretch 这里写图片描述

3.6 showDivider and dividerDrawable

showDivider , 显示分割线。支持none , beginning , middle , end四种取值

绘制一条分割线，然后flexDirection为row , flexWrap为wrap，dividerDrawable为@drawable/divider为例，看看效果

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"></solid>
    <size android:width="2dp"/>
</shape>
showDivider 效果图
none 这里写图片描述
beginning 这里写图片描述
middle 这里写图片描述
end 这里写图片描述

3.7 showDividerHorizontal and dividerDrawableHorizontal

横向分割线，支持none , beginning , middle , end四种取值，四种取值和上面的使用差不多，我们只举一个例子

分割线

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"></solid>
    <size  android:height="2dp"/>
</shape>

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EBEBEB"
        app:flexDirection="column"
        app:showDividerHorizontal="middle"
        app:dividerDrawableHorizontal="@drawable/divider"
        app:flexWrap="wrap">

        <TextView
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:text="Android" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="android studio" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="Android安全" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="Android框架" />
    </com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>

这里写图片描述

3.8 showDividerVertical and dividerDrawableVertical

和上面的用法相似，看下效果把

分割线

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"></solid>
    <size  android:width="2dp"/>
</shape>

这里写图片描述

4. FlexboxLayout子元素属性自测

4.1 layout_order

默认情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EBEBEB"
        app:flexDirection="row"
        app:flexWrap="wrap">

        <TextView
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:gravity="center"
            android:text="Android" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="android studio" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="Android安全" />
    </com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>

这里写图片描述

顺序排一下 2，3，1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EBEBEB"
        app:flexDirection="row"
        app:flexWrap="wrap">

        <TextView
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            app:layout_order="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:gravity="center"
            android:text="Android" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            app:layout_order="3"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="android studio" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            app:layout_order="1"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="Android安全" />
     </com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>

这里写图片描述

4.2 layout_flexGrow

layout_flexGrow ,子元素的放大比例， 决定如何分配剩余空间（如果存在剩余空间的话），默认值为0,不会分配剩余空间，如果某一行中有一个item的 layout_flexGrow 是一个正值，那么会将这行全部剩余空间分配给这个Item , 如果这一行有多个Item这个属性都为正值，那么剩余空间的按照layout_flexGrow定义的比例（有点像LinearLayout的layout_weight属性）进行分配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EBEBEB"
        app:flexDirection="row"
        app:flexWrap="wrap">

        <TextView
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            app:layout_flexGrow="10.0"
            android:text="Android" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="android studio" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="@drawable/item_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            app:layout_flexGrow="10.0"
            android:text="Android安全" />
     </com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>

这里写图片描述
可以看到黄色框内的两个元素（也就是第一个子元素和第三个子元素）按照1：1 的比例分配了这一行中剩余的空间。

4.3 layout_flexShrink

layout_flexShrink , 子元素缩小比例 , 与上面的属性值有点对应关系，当空间不足时，子元素需要缩小（针对单行），默认值为1，如果所有子元素的layout_flexShrink 值为1,空间不足时，都等比缩小，如果有一个为0，其他为1，空间不足时，为0的不缩小，负值无效。

这里引用Github上的一个图，看看效果
缩小比例

4.4 layout_alignSelf

layout_alignSelf 属性可以给子元素设置对齐方式，上面讲的alignItems属性可以设置对齐，这个属性的功能和alignItems一样，只不过alignItems作用于所有子元素，而layout_alignSelf 作用于单个子元素。默认值为auto, 表示继承alignItems属性，如果为auto以外的值，则会覆盖alignItems属性。支持auto , flex_start , flex_end , center , baseline , stretch六种取值。除了auto以外，其他和alignItems属性一样，而auto表示继承alignItems的属性，所以基本上效果相同，这里不做过多解释。

4.5 layout_flexBasisPercent

layout_flexBasisPercen , 表示设置子元素的长度为它父容器长度的百分比。这个值只有设置了父容器的长度时才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默认值时-1。

设置第一个元素
app:layout_flexBasisPercent=”50%”

这里写图片描述

4.6 layout_minWidth / layout_minHeight

强制限制 FlexboxLayout的子元素（宽或高）不会小于最小值，不管layout_flexShrink这个属性的值为多少，子元素不会被缩小到小于设置的这个最小值。

4.7 layout_maxWidth / layout_maxHeight

这个和上面的刚好相反，强制限制FlexboxLayout子元素不会大于这个最大值, 不管layout_flexGrow的值为多少，子元素不会被放大到超过这个最大值。

4.8 layout_wrapBefore

layout_wrapBefore 属性控制强制换行，默认值为false,如果将一个子元素的这个属性设置为true，那么这个子元素将会成为一行的第一个元素。这个属性将忽略flex_wrap 设置的 noWrap值。

设置第三个元素
app:layout_wrapBefore=”true”

这里写图片描述

可以看到第三个元素另起了一行

# 布局控件

喜欢这篇文章？打赏一下作者吧

《Android 基础（四十一）》 ExpandableListView
《Android 基础（三十九）》 SpannableString
关注我

链接

分类

标签云

Aandroid实战 Android Studio Android基础 Android实战 Android开源库 Android源码 Angular CentOS Docker Drawable FileProvider Flutter Fragment Framework Gank.io Gitlab HAL IDEA插件 Kotlin LeetCode Linux MPAndroidChart MacOS Markdown MultiDex Mysql NDK PMDReader Picasso PowerDesign Realm RecyclerView Retrofit RxJava Smali Tomcat WanANdroid WebService Xen allowBackup ionic 动画 四大组件 多线程 局域网 工具 布局控件 应用 开发问题 开机动画 开源 开源库 微信公众号 微信小程序 百度地图 系统源码 自定义View 虚拟化 设计模式 译文 资源 辅助工具 配置

最新文章

归档

标签

Aandroid实战 1
Android Studio 6
Android基础 1
Android实战 27
Android开源库 3
Android源码 1
Angular 1
CentOS 3
Docker 4
Drawable 1
FileProvider 1
Flutter 1
Fragment 4
Framework 9
Gank.io 3
Gitlab 1
HAL 1
IDEA插件 1
Kotlin 6
LeetCode 5
Linux 6
MPAndroidChart 5
MacOS 1
Markdown 1
MultiDex 1
Mysql 2
NDK 1
PMDReader 1
Picasso 1
PowerDesign 1
Realm 8
RecyclerView 1
Retrofit 1
RxJava 3
Smali 2
Tomcat 1
WanANdroid 1
WebService 1
Xen 3
allowBackup 1
ionic 1
动画 3
四大组件 2
多线程 1
局域网 1
工具 1
布局控件 33
应用 7
开发问题 1
开机动画 2
开源 1
开源库 13
微信公众号 1
微信小程序 2
百度地图 4
系统源码 1
自定义View 8
虚拟化 3
设计模式 2
译文 20
资源 1
辅助工具 1
配置 1

最新文章

归档

标签

Aandroid实战 1
Android Studio 6
Android基础 1
Android实战 27
Android开源库 3
Android源码 1
Angular 1
CentOS 3
Docker 4
Drawable 1
FileProvider 1
Flutter 1
Fragment 4
Framework 9
Gank.io 3
Gitlab 1
HAL 1
IDEA插件 1
Kotlin 6
LeetCode 5
Linux 6
MPAndroidChart 5
MacOS 1
Markdown 1
MultiDex 1
Mysql 2
NDK 1
PMDReader 1
Picasso 1
PowerDesign 1
Realm 8
RecyclerView 1
Retrofit 1
RxJava 3
Smali 2
Tomcat 1
WanANdroid 1
WebService 1
Xen 3
allowBackup 1
ionic 1
动画 3
四大组件 2
多线程 1
局域网 1
工具 1
布局控件 33
应用 7
开发问题 1
开机动画 2
开源 1
开源库 13
微信公众号 1
微信小程序 2
百度地图 4
系统源码 1
自定义View 8
虚拟化 3
设计模式 2
译文 20
资源 1
辅助工具 1
配置 1
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×